<template>
  <div class="app-container">
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
        <el-tab-pane label="药品总库存" name="totalStock" tab-position="right" stretch="true">
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="药品名称" prop="drugName">
              <el-input
                v-model="queryParams.drugName"
                placeholder="请输入药品名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item label="药品类型" prop="drugType">
              <el-select v-model="queryParams.drugType" placeholder="药品类型" clearable size="small">
                <el-option
                  v-for="dict in dict.type.psd_drug_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>


            <el-form-item label="生产厂家" prop="drugVender">
              <el-select v-model="queryParams.drugVender" placeholder="生产厂家" clearable size="small">
                <el-option
                  v-for="dict in dict.type.psd_drug_vender"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>


            <el-form-item label="处方类型" prop="drugRpType">
              <el-select v-model="queryParams.drugRpType" placeholder="处方类型" clearable size="small">
                <el-option
                  v-for="dict in dict.type.psd_drug_rp_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>


          <el-table v-loading="loading" :data="depotList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="药品ID" align="center" prop="drugId"/>
            <el-table-column label="药品名称" align="center" prop="drugName"/>
            <el-table-column label="药品编码" align="center" prop="drugCode"/>
            <!--<el-table-column label="生产厂家" align="center" prop="drugVender"/>-->
            <el-table-column label="生产厂家" align="center" prop="drugVender" width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.psd_drug_vender" :value="scope.row.drugVender"/>
              </template>
            </el-table-column>
            <!--<el-table-column label="药品类型" align="center" prop="drugType"/>-->
            <el-table-column label="药品类型" align="center" prop="drugType" width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.psd_drug_type" :value="scope.row.drugType"/>
              </template>
            </el-table-column>
            <!--<el-table-column label="处方类型" align="center" prop="drugRpType"/>-->
            <el-table-column label="处方类型" align="center" prop="drugRpType" width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.psd_drug_rp_type" :value="scope.row.drugRpType"/>
              </template>
            </el-table-column>
            <el-table-column label="单位g" align="center" prop="drugUnit"/>
            <el-table-column label="处方价格" align="center" prop="drugRpPrice"/>
            <el-table-column label="库存量" align="center" prop="drugStock"/>
            <el-table-column label="预警值" align="center" prop="drugVpt">
              <template slot-scope="scope">
                <span>{{scope.row.drugVpt<=10?"库存不足":scope.row.drugVpt}}</span>  <!--做格式化的操作的，之后肯定会用到记住！！-->
              </template>
            </el-table-column>
            <el-table-column label="换算量" align="center" prop="drugMatrixing"/>
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <span>{{scope.row.status==1?"停用":"正常"}}</span>  <!--做格式化的操作的，之后肯定会用到记住！！-->
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>






        <!-- 右边的标签页 -->
        <el-tab-pane label="批次库存及价格" name="stockAndPrice" stretch="true" tab-position="right" width="500px">

          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item label="采购单据号" prop="durgName">
              <el-input
                v-model="queryParams.durgName"
                placeholder="请输入采购单据号"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="药品名称" prop="drugName">
              <el-input
                v-model="queryParams.drugName"
                placeholder="请输入药品名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item label="药品类型" prop="drugType">
              <el-select v-model="queryParams.drugType" placeholder="药品类型" clearable>
                <el-option
                  v-for="dict in dict.type.psd_drug_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="生产厂家" prop="drugVender">
              <el-select v-model="queryParams.drugVender" placeholder="生产厂家" clearable>
                <el-option
                  v-for="dict in dict.type.psd_drug_vender"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="处方类型" prop="drugRpType">
              <el-select v-model="queryParams.drugRpType" placeholder="处方类型" clearable>
                <el-option
                  v-for="dict in dict.type.psd_drug_rp_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="queryParams.createTime" style="width:100%">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table v-loading="loading" :data="depotList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="药品ID" align="center" prop="drugId" width="100"/>
            <el-table-column label="药品名称" align="center" prop="drugName" :show-overflow-tooltip="true"/>
            <el-table-column label="采购量" align="center" prop="drugStock"/>
            <el-table-column label="批发价" align="center" prop="drugRpPrice"/>
            <el-table-column label="批发额" align="center" prop="drugStock"/>
            <el-table-column label="批次号" align="center" prop="drugCode"/>
            <el-table-column label="生产厂家" align="center" prop="drugVender" width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.psd_drug_vender" :value="scope.row.drugVender"/>
              </template>
            </el-table-column>
            <el-table-column label="药品类型" align="center" prop="drugType" width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.psd_drug_type" :value="scope.row.drugType"/>
              </template>
            </el-table-column>
            <el-table-column label="处方类型" align="center" prop="drugRpType" width="100">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.psd_drug_rp_type" :value="scope.row.drugRpType"/>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="换算量" align="center" prop="drugMatrixing"/>
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <span>{{scope.row.status==1?"停用":"正常"}}</span>  <!--做格式化的操作的，之后肯定会用到记住！！-->
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />

        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>

<script>
    import { listDepot, getPost, delPost, addPost, updatePost, exportPost,getDicts2,getdoctorType,getDurgType } from "@/api/pssd/stock";
    export default {
        name: "Post",
        dicts:['psd_drug_type','psd_drug_vender','psd_drug_rp_type'],
        data() {
            return {
                signn: 0,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 岗位表格数据
                depotList: [],
                // 弹出层标题
                title: "",
                activeName: 'totalStock',
                // 是否显示弹出层
                open: false,
                // 状态数据字典
                statusOptions: [],
                statusOptions0: [],
                statusOptions1: [],
                statusOptions2: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    postCode: undefined,
                    postName: undefined,
                    status: undefined
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    registraName: [
                        {required: true, message: "挂号费名称不能为空", trigger: "blur"}
                    ],
                    registraUnitprice: [
                        {required: true, message: "金额不能为空", trigger: "blur"}
                    ],
                }
            };
        },
        created() {
            this.getList(); //查询所有数据的
            this.getDicts("sys_normal_disable").then(response => {
                // this.statusOptions = response.data;
                this.statusOptions = [1, 2];
            });
            // this.getDicts1();
            // this.getDicts2();
            // this.getDicts3();
        },
        methods: {
            handleClick(tab, event) {


            },
            // 查询岗位列表
            /*getList() {
                this.loading = true;
                this.depotList = ['d', 'd'];
                this.loading = false;
                // listPost(this.queryParams).then(response => {
                //     console.log(response.rows);
                //     this.postList = response.rows;
                //     this.total = response.total;
                //     this.loading = false;
                // });
            },*/
            /** 查询公告列表 */
            getList() {
                    this.loading = true;
                    listDepot(this.queryParams).then(response => {
                        this.depotList = response.rows;
                        this.total = response.total;
                        this.loading = false;
                    });
            },
            getDicts1() {
                this.loading = true;
                getDicts2().then(response => {
                    this.statusOptions1 = response;
                });
            },
            getDicts2() {
                this.loading = true;
                getdoctorType().then(response => {
                    this.statusOptions2 = response;
                });
            },

            getDicts3() {
                this.loading = true;
                getDurgType().then(response => {
                    this.statusOptions0 = response;
                });
            },


            // 岗位状态字典翻译
            statusFormat(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    postId: undefined,
                    registraName: undefined,
                    registraUnitprice: undefined,
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.postId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.signn = 1;
                this.reset();
                this.open = true;
                this.title = "添加岗位";
            },
            /** 修改按钮操作 */
            /*这个是另一种方法，可以少进一次数据库，如果按照他的方法回显一次数据，进数据库获取一次数据一共获得两次数据*/
            handleUpdate(row) {   /*选中行的数据 */
                this.signn = 2;
                this.reset();
                this.form = row;  //进行的数据的回显的操作
                this.open = true;
                this.title = "修改岗位";
                /*const deptsId = row.deptsId || this.ids
                getPost(deptsId).then(response => {
                  this.form = response.data;  //进行的数据的回显的操作
                  this.open = true;
                  this.title = "修改岗位";
                });*/
            }
        }
    };
</script>
